<template>
  <div class="set-resource w100 h100">
    <div class="module-tree">
      <vue-scroll>
        <div class="common-title"><span></span>资源</div>
        <el-select v-model="currentGroup" placeholder="请选择" style="margin: 20px 0">
          <el-option
            v-for="(item, index) in resourceGroup"
            :key="index"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-checkbox-group v-model="checkList">
          <el-checkbox :label="item.name" v-for="(item, index) in listData" :key="index"></el-checkbox>
        </el-checkbox-group>
      </vue-scroll>
    </div>
    <div class="role-info">
      <vue-scroll>
        <div class="title"><span></span>角色信息</div>
        <div class="role-list">
          <div class="view-list" v-for="(item, index) in listKey" :key="index">
            <div class="key" :style="getStyle(index)">{{item.label}}</div>
            <div class="value" :style="getStyle(index)">{{roleForm[item.name]}}</div>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="cancel">取  消</el-button>
            <el-button type="primary" @click="sure">确  定</el-button>
          </div>
        </div>
      </vue-scroll>
    </div>
  </div>
</template>

<script>
import Config from '../../../../config'
export default {
  name: 'SetResource',
  props: {},
  data () {
    return {
      listKey: [
        {
          name: 'sort',
          label: '角色编号'
        },
        {
          name: 'name',
          label: '角色名称'
        },
        {
          name: 'code',
          label: '角色编码'
        },
        {
          name: 'type',
          label: '角色类型'
        },
        {
          name: 'remark',
          label: '角色描述'
        }
      ],
      roleForm: {
        sort: -1,
        name: '',
        code: '',
        type: '',
        remark: ''
      },
      // 资源分组
      resourceGroup: [],
      currentGroup: null,
      listData: [],
      checkList: [] // 默认选中的
    }
  },
  mounted () {
    this.getRole()
      .then(() => this.getResourceGroup())
      .then(() => {
        this.getResourceByGroup(0)
        this.getResourceByGroup(this.roleForm.id)
      })
  },
  methods: {
    getStyle (index) {
      if (index % 2 === 0) {
        return `background: #f9f9f9`
      }
      return `background: #fff`
    },
    /**
     * 根据id获取角色信息
     * */
    getRole () {
      return new Promise((resolve, reject) => {
        const id = this.$route.params.id
        const url = `${Config.AUTH_URL}/role/getById`
        const param = {
          id
        }
        this.$http.get(url, param)
          .then(data => {
            this.roleForm = data
            resolve()
          })
          .catch((e) => reject(e))
      })
    },
    /**
     * 获取所有资源组
     * */
    getResourceGroup () {
      return new Promise((resolve, reject) => {
        const url = `${Config.AUTH_URL}/Resource/getCodeByGroup`
        this.$http.get(url)
          .then(data => {
            this.resourceGroup.splice(0)
            this.currentGroup = data[0]
            data.forEach(item => {
              this.resourceGroup.push({
                label: item,
                value: item
              })
            })
            resolve()
          })
          .catch(e => reject(e))
      })
    },
    /**
     * 根据资源group查询资源列表
     * */
    getResourceByGroup (id) {
      const url = `${Config.AUTH_URL}/Resource/getResourceByRoleAndAll`
      const param = {
        code: this.currentGroup,
        roleId: id
      }
      this.$http.get(url, param)
        .then(data => {
          const list = data.all
          this.listData.splice(0)
          list.forEach(item => {
            this.listData.push(item)
          })
          if (id === 0) { // 获取特定角色的组资源
            this.checkList.splice(0)
            list.forEach(item => {
              this.checkList.push(item.name)
            })
          }
        })
    },
    cancel () {
      this.$router.go(-1)
    },
    sure () {
      const checkList = this.checkList
      if (checkList.length === 0) {
        this.$message.warning('请至少选择一项资源')
        return
      }
      const url = `${Config.AUTH_URL}/roleResourceR/insertOrUpdate`
      const param = {
        roleId: this.roleForm.id,
        resourceId: checkList.join(',')
      }
      this.$http.post(url, param)
        .then(data => {
          this.$message.success('保存成功')
          this.cancel()
        })
        .catch(e => {
          this.$message.success('保存失败')
        })
    }
  }
}
</script>

<style lang="scss" scoped>
  .set-resource {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    .module-tree {
      width: 430px;
      margin-right: 20px;
      background-color: #fff;
      border: 1px solid #E4E4E4;
      box-sizing: border-box;
      padding: 30px 0 30px 30px;
      ._tree {
        margin: 20px 0 0 20px;
      }
    }
    .role-info {
      flex: 1;
      background-color: #fff;
      border: 1px solid #E4E4E4;
      box-sizing: border-box;
      padding: 30px 0 30px 30px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      .title {
        color: #3C81FF;
        font-size: 14px;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 20px;
        span {
          background-color: #3C81FF;
          width: 2px;
          height: 14px;
          margin-right: 8px;
        }
      }
      .role-list {
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        left: 50%;
        .view-list {
          height: 39px;
          line-height: 39px;
          color: #444;
          display: flex;
          justify-content: center;
          color: #666;
          font-size: 14px;
          .key {
            width: 150px;
            margin-right: 10px;
            padding-left: 30px;
          }
          .value {
            width: 500px;
            padding-left: 30px;
          }
        }
        .dialog-footer {
          height: 28px;
          text-align: center;
          margin-top: 30px;
          .el-button {
            padding: 7px 27px;
          }
        }
      }
    }
  }
</style>
